<template>
  <div v-loading="loading">
    <iframe
      class="custom-iframe"
      :src="src"
      ref="iframe"
      frameborder="0"
      seamless="seamless"
    />
  </div>
</template>

<script lang="js">
export default{
    name:'CustomIframe',
    data(){
      return {
        loading:false,
        src:'https://qiankun.umijs.org/zh/guide'
      }
    },

    watch:{
      $route:{
        immediate:true,
        handler(val){this.updateSrc(val)}
      }
    },
    mounted(){
      this.registEvent()
    },

    methods:{
      registEvent(){
        if(this.$refs['iframe']){
          const iframeEle = this.$refs['iframe'];
          iframeEle.onload =( e ) => {
            this.loading=false;
          }
        }else{
          console.warn('dom 未挂载！')
        }
      },
      updateSrc(val) {
        if(val.params?.url){
          this.src=window.atob(val.params.url)
          this.loading=true;
          setTimeout(() => this.loading=false, 5000)
        }
      }
    }
}
</script>
<style lang="css" scoped>
.custom-iframe {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  height: calc(100vh - 60px - 20px);
}
</style>
